<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/couponGroupList'">
      <div class="vs-search-box" style="padding: 24px 22px">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="类型">
            <el-select
              style="width: 200px"
              clearable
              v-model="paging.keys"
              placeholder=""
            >
              <el-option label="满减券" value="0"> </el-option>
              <el-option label="折扣券" value="1"> </el-option>
              <el-option label="代金券" value="2"> </el-option>
              <el-option label="新人券" value="3"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input type="text" v-model="paging.title"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              style="width: 200px"
              clearable
              v-model="paging.status"
              placeholder=""
            >
              <el-option label="未使用" value="0"> </el-option>
              <el-option label="已使用" value="1"> </el-option>
              <el-option label="已发放完" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="float: right; margin-right: 0">
            <el-button @click="reset">重置</el-button>
            <el-button @click="select(1)" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <el-button
            icon="el-icon-upload2"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
          <!-- <el-button icon="el-icon-plus" @click="setRow(6)" type="primary"
            >新增</el-button
          > -->
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column
            width="100px"
            label="分组编号"
            prop="id"
          ></el-table-column>
          <el-table-column prop="title" label="名称"> </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{ scope.row.off_type == 0 ? "满减券" : scope.row.off_type == 1 ? "折扣券" : scope.row.off_type == 2 ? '代金券' : '新人券' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="适用范围">
            <template slot-scope="scope">
              <span>{{ scope.row.coupon_scope_use_id | type }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="数量"> </el-table-column>
          <el-table-column prop="create_time" label="有效时间">
            <template slot-scope="scope">
              <span
                >{{ scope.row.start_time | dateFormat("YYYY-MM-DD") }} 到
                {{ scope.row.end_time | dateFormat("YYYY-MM-DD") }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="优惠设置">
            <template slot-scope="scope">
              <el-option label="满减券" value="0"> </el-option>
              <el-option label="折扣券" value="1"> </el-option>
              <el-option label="代金券" value="2"> </el-option>
              <el-option label="新人券" value="3"> </el-option>

              <span v-if="scope.row.off_type == 0"
                >满{{ scope.row.min_value }}元 减{{
                  scope.row.face_value
                }}元</span
              >
              <span v-if="scope.row.off_type == 1"
                >{{ scope.row.discount }}折 最大折扣金额{{
                  scope.row.max_discount
                }}元</span
              >
               <span v-if="scope.row.off_type == 2 || scope.row.off_type == 3"
                >优惠{{scope.row.face_value}}元</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="卡券说明"> </el-table-column>
          <el-table-column prop="create_time" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.status | typeName }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="159" label="操作">
            <template slot-scope="scope">
              <!-- <span
                v-if="scope.row.status != 2"
                @click="setRow(1, scope.row)"
                class="tab-hui-text"
                >发放</span
              > -->
              <span @click="setRow(2, scope.row)" class="tab-hui-text"
                >查看</span
              >
              <!-- <span @click="setRow(3, scope.row)" class="tab-hui-text"
                >编辑</span
              > -->
              <!-- <span
                @click="setRow(5, scope.row, scope.$index)"
                class="tab-red-text"
                >删除</span
              > -->
              <!-- <span @click="setRow(4,scope.row)" class="tab-hui-text">导出</span> -->
              <!-- <span @click="setRow(5,scope.row)" class="tab-hui-text">生成</span> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
        <!-- <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="sizes,prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div> -->
      </div>
    </div>
    <router-view></router-view>

    <el-dialog
      title="发放优惠券"
      :visible.sync="dialogFormVisible"
      width="800px"
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        label-position="left"
        label-width="80px"
        class="sendCoupon"
      >
        <el-form-item label="门店" style="margin-right: 30px">
          <el-select
            v-model="form.store_id"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员等级" style="margin-right: 30px">
          <el-select
            v-model="form.vip_id"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in vipList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员状态" style="margin-right: 30px">
          <el-select
            style="width: 200px"
            clearable
            placeholder="请选择"
            v-model="form.vip_status"
          >
            <el-option label="未开卡" value="0"> </el-option>
            <el-option label="正常" value="1"> </el-option>
            <el-option label="待激活" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="关键字"
          class="phoneWrap"
          style="margin-right: 30px"
        >
          <el-input
            v-model="serchTxt"
            style="width: 200px"
            placeholder="姓名、电话、会员编号"
          ></el-input>
          <el-button size="mini" @click="serchUserReset()">重置</el-button>
          <el-button type="primary" size="mini" @click="handleCurrentChange2(1)"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="couponWrap" v-loading="couponLoading">
          <el-table
            max-height="400"
            :data="userList"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="username" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="180">
            </el-table-column>
            <el-table-column label="会员等级" min-width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.vip">{{ scope.row.vip.title }}</span>
                <span v-else>散客</span>
              </template>
            </el-table-column>
            <el-table-column prop="vip_status" label="会员状态" min-width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.vip_status | statusText }}</span>
              </template>
            </el-table-column>
          </el-table>
      </div>
      <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange2"
            :current-page.sync="form.page"
            :page-size="form.limit"
            layout="prev, pager, next, jumper"
            :total="form.total"
          >
          </el-pagination>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="sendCoupon">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      recordList: [],
      list: [],
      loading: false,
      loading2: false,
      isBtn: false,
      dialogVisible: false,
      paging: {
        title: "",
        keys: "",
        status: "",
        page: 1,
        total: 0,
        limit: 10,
      },
      form: {
        page:1,
        limit:10,
        total: 0,
        keys: "",
        store_id: "",
        vip_status: "",
        vip_id: "",
        coupon_id: "",
      },
      serchTxt: "",
      user_ids: [],
      userList: [],
      couponLoading: false,
      tableData: [
        {
          username: "111",
          code: "111",
          create_time: "111",
        },
      ],
      sendParams: {
        id: "",
        user_ids: "",
      },
      isExport: false,
      list: [],
      vipList: [],
    };
  },
  created() {
    if (this.$route.path == "/couponGroupList") {
      this.handleCurrentChange(1);
    }
    this.getList();
    this.getallUser();
    this.getVipList();
  },
  filters: {
    typeName(val) {
      switch (val) {
        case 0:
          val = "未使用";
          break;
        case 1:
          val = "已使用";
          break;
        case 2:
          val = "已发放完";
          break;
      }
      return val;
    },
    type(val) {
      switch (val) {
        case 0:
          val = "通用券";
          break;
        case 1:
          val = "商品券";
          break;
        case 2:
          val = "项目券";
          break;
      }
      return val;
    },
    statusText(val) {
      switch (val) {
        case 0:
          val = "未开卡";
          break;
        case 1:
          val = "正常";
          break;
        case 2:
          val = "待激活";
          break;
      }
      return val;
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.user_ids = val;
      console.log(this.user_ids, "111111111");
    },
    select() {
      this.repairGetList();
    },
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportCoupons(this.paging);
      this.utils.downloadXlsx(res, "优惠券-列表");
      this.isExport = false;
    },
    //  获取所有门店
    async getList() {
      let { code, data } = await this.$Http.getAllStore();
      this.list = data;
    },
    // 发放优惠券
    async sendCoupon() {
      if (!this.user_ids.length) {
        this.$message.error("请选择要发放的用户");
        return;
      }
      let arr = [];
      this.user_ids.forEach((ele) => {
        arr.push(ele.id);
      });
      this.sendParams.user_ids = arr.join(",");
      let { code, data } = await this.$Http.giveCoupons(this.sendParams);
      if (code) {
        this.form = this.$options.data().form;
        this.sendParams = this.$options.data().sendParams;
        // this.dialogFormVisible = false;
        this.user_ids = this.$options.data().user_ids;
        this.repairGetList();
        this.$message.success("发放成功！");
        this.handleClose();
      }
    },
    // 重置
    async serchUserReset() {
      this.user_ids = [];
      this.form = this.$options.data().form;
      this.serchTxt = "";
      // this.sendParams = this.$options.data().sendParams;
      this.user_ids = this.$options.data().user_ids;
      await this.handleCurrentChange2(1);
    },
    // 获取所有会员
    async getallUser() {
      this.form.keys = this.serchTxt;
      this.couponLoading = true;
      let { code, data } = await this.$Http.getUser(this.form);
      this.couponLoading = false;
      if(code){
          this.userList = data.data;
          this.form.total = data.total;
      }
    },
    // 获取会员卡列表
    async getVipList() {
      let { code, data } = await this.$Http.getVip();
      if (code) {
        this.vipList = data;
      }
    },
    // 搜索会员
    async serchUser() {
      await this.getallUser();
    },
    async setRow(type, row, index) {
      if (type == 1) {
        this.sendParams.id = row.id;
        this.form.coupon_id = row.id;
        this.dialogFormVisible = true;
        await this.getallUser();
      } else if (type == 2) {
        // 如果是已使用过优惠券跳转到订单详情
        this.utils.goUrl(`/details?title=查看优惠券&id=${row.id}`);
      } else if (type == 3) {
        this.utils.goUrl(`/editCoupon?title=编辑优惠券&id=${row.id}`);
      } else if (type == 4) {
        //   导出
      } else if (type == 5) {
        // 删除
        this.$confirm("此操作将永久删除该优惠券, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let { code } = await this.$Http.delCoupon({ id: row.id });
            if (code) {
              this.handleCurrentChange(1);
              // this.tableData.splice(index,1)
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.utils.goUrl(`/addCoupon?title=新增优惠券`);
      }
    },
    handleClose(dom) {
      this.user_ids = [];
      this.form = this.$options.data().form;
      this.serchTxt = "";
      this.sendParams = this.$options.data().sendParams;
      this.user_ids = this.$options.data().user_ids;
      this.getallUser();
      this.dialogFormVisible = false;
      dom && dom();
    },
    async repairGetList() {
      this.loading = true;

      let { code, data } = await this.$Http.getCoupons(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.form.date = "";
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },

    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
    handleCurrentChange2(val) {
      this.form.page = val;
      this.getallUser();
    },
  },
};
</script>

<style lang="scss" scoped>
.couponWrap {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  max-height: 430px;
}
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.operation-box {
  display: flex;
  justify-content: flex-end;
}
.phoneWrap {
  ::v-deep {
    .el-form-item__content {
      display: flex;
    }
    .el-button {
      margin-left: 10px;
    }
  }
}
.sendCoupon {
  display: flex;
  flex-wrap: wrap;
}
</style>